<template>
    <div class="invitation">
        <!-- 登记管理 -->
        <div class="container">
            <div>
                <el-form ref="form" :model="from">
                    <el-col :span="5">
                        <el-form-item label="姓名:" label-width="90px">
                            <el-input v-model="from.userName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="部门:" label-width="90px">
                            <el-input v-model="from.deptListId" placeholder="请输入部门名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="年假查询:" label-width="90px">
                            <el-input v-model.number="from.annualLeave" placeholder="请输入年假"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="可用年假查询:" label-width="120px">
                            <el-input v-model.number="from.unAnnualLeave" style="width:90%" placeholder="请输入可用年假"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" class="mr10" @click="search">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="日期:" label-width="90px">
                            <el-date-picker
                                v-model="time"
                                type="daterange"
                                 value-format="yyyy-MM-d HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width:80%"
                                :clearable="false"
                                :picker-options="pickerOptions"
                                :default-time="['00:00:00', '23:59:59']"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>
            <el-col :span="7" style="margin-bottom:20px">
                <el-button type="primary" class="mr10" @click="Addtags">设置年假天数</el-button>
            </el-col>
            <el-table
                ref="multipleTable"
                :data="tableData"
                v-loading="loading"
                border
                class="table"
                show-overflow-tooltip
                :row-key="getRowKeys"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="mobile" label="联系电话" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="department" label="部门" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="departmentName" label="职位" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobnumber" label="入职时间" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="annualLeave" label="年假" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="unAnnualLeave" label="可用年假" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="inAnnualLeave" label="已用年假" align="center" show-overflow-tooltip> </el-table-column>
            </el-table>
            <div class="pagination">
                <pagination :query="query" @getData="getData" :total="total" />
            </div>
        </div>
        <el-dialog title="添加标签" :visible.sync="dialogFormVisible">
            <el-form>
                <el-col :span="16">
                    <el-form-item label="设置年假天数"  label-width="120px">
                        <el-input v-model="annualLeaves" placeholder="请输入年假天数"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureTag">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { userTicket,setAnnualLeave,} from '../../api/index';
import Pagination from '@/components/Pagination';
import OSnow from '@/utils/isOS';
export default {
    name: 'invitation',
    components: { Pagination },
    data() {
        return {
        loading:true,
        from: {
            startDate:"",//开始时间
            endDate:"",//结束时间
            userName:'',
            deptListId:'',//部门
            annualLeave:'',//年假
            unAnnualLeave:'',//可用年假
        },
        query: {
            offset: 1,
            limit: 10,
        },
        total:0,
        annualLeaves:"",//设置年假天数
        datas:[],//调整年假接口参数
        time: [],
        tableData: [],
        multipleSelection: [],
        tagId:[],
        dialogFormVisible:false,
        pickerOptions:{
            disabledDate(date){
            let zero=new Date().setHours(0, 0, 0, 0);
            if(date.getTime()>zero){
              return true;
            }
            return false;
            }
        },
    };
},
    created() {
        this.getData();

    },
    methods: {
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getRowKeys(row) {
            return row.id;
        },
        //添加年假天数
        Addtags(){
            if (!this.multipleSelection.length) {
                this.$message.warning('请至少选择一项');
                return;
            }
            this.dialogFormVisible=true
            this.tagId = this.multipleSelection.map(item => {
                return item.id;
            });
        },
        sureTag(){
            this.datas = this.tagId.map(item=>{
                return {
                     id:item,
                     annualLeave:this.annualLeaves
                }
            })
            setAnnualLeave(this.datas).then(res=>{
                if(res.data.status == 100){
                    this.getData()
                    this.$message.success('操作成功')
                    this.dialogFormVisible = false
                }
                this.$refs.multipleTable.clearSelection();
            })
        },
        search(){
            this.query.offset=1
            this.getData()
        },
        // 获取 列表数据
        getData() {
            this.from.startDate = this.time[0];
            this.from.endDate = this.time[1];
            const data = { ...this.query, ...this.from };
            userTicket(data)
                .then(res => {
                    if (res.data.status == 100) {
                        this.loading = false
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.errMsg);
                    }
                })
                .catch(err => {
                  console.log(err)
                });
        },
        Export() {
            const data = { ...this.from };
            excelExportEntity(data).then(res => {
                this.download(res);
            });
        },
        download(data) {
            if (!data) {
                return;
            }
            let blob = new Blob([data.data], {
                type: 'application/vnd.ms-excel;charset=utf-8'
            });
            let url = window.URL.createObjectURL(blob);
            let aLink = document.createElement('a');
            aLink.style.display = 'none';
            if (OSnow() == 'mac') {
                aLink.download = '报名人员.xls';
            } else {
                aLink.download = '报名人员.xlsx';
            }

            aLink.href = url;
            document.body.appendChild(aLink);
            aLink.click();
        },
        //重置
        reset() {
            this.from.userName = '';
            this.from.deptListId = '';
            this.from.annualLeave = '';
            this.from.unAnnualLeave = '';
            this.time='';
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-top: 20px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
